function initWaterfall() {
	window.addEventListener('DOMContentLoaded', function(e) {

		var waterfall = new Waterfall({
			minBoxWidth: 300
		});
		var boxHandle = newNode();

		$("input[name=resize]").keydown(function(e) {
			if(e.keyCode == 13) {
				$(resizeBtn).click();
			}
		})
		var resizeBtn = document.getElementsByClassName('resize-btn')[0];
		resizeBtn.addEventListener('click', function() {
			waterfall.minBoxWidth = $("input[name=resize]").val();
			waterfall.compose(true);
			scroll();
		});

		var isLast = false;
		// button click handle
		/*var btn = document.getElementById('add-btn');
		btn.addEventListener('click', function() {

		    waterfall.addBox(boxHandle());
		});

		var scaleUpbtn = document.getElementById('scaleup-btn');
		scaleUpbtn.addEventListener('click', function() {

		    waterfall.minBoxWidth += 50;
		    waterfall.compose(true);
		});

		var scaleDownbtn = document.getElementById('scaledown-btn');
		scaleDownbtn.addEventListener('click', function() {

		    waterfall.minBoxWidth -= 50;
		    waterfall.compose(true);
		});*/

		window.onscroll = function() {
			scroll();
		};

		function scroll() {
			if(!isLast) {
				// get last box of the column
				var i = waterfall.getHighestIndex();
				while(i > -1 && checkSlide(getLastBox(i))) {
					waterfall.addBox(boxHandle())
					i = waterfall.getHighestIndex();
				}
			}
		}

		function getLastBox(i) {
			return Array.prototype.slice.call(waterfall.columns[i].children, -1)[0];
		}

		function checkSlide(elem) {
			if(elem) {
				var screenHeight = (document.documentElement.scrollTop || document.body.scrollTop) +
					(document.documentElement.clientHeight || document.body.clientHeight);
				var elemHeight = elem.offsetTop + elem.offsetHeight / 2;
				return elemHeight < screenHeight;
			}
		}

		function newNode() {
			return function() {
				var item = wtfs[parseInt(Math.random() * wtfs.length)]
				var box = document.createElement('div');
				box.className = 'wf-box';
				var image = document.createElement('img');
				image.src = '/img/waterfall/'+item.url;
				box.appendChild(image);
				var content = document.createElement('div');
				content.className = 'content';
				var title = document.createElement('label');
				title.appendChild(document.createTextNode(item.name));
				content.appendChild(title);
				var p = document.createElement('p');
				p.appendChild(document.createTextNode('Content here'));
				content.appendChild(p);
				box.appendChild(content);
				return box;
			};
		}
	});
}